vs code 简易使用教程（前端） |
您所在的位置：网站首页 › vscode使用教程 js开发 › vs code 简易使用教程（前端） |
vs code 简易使用教程（前端）
|
一、常用设置：
1、设置tab为2空格 用户首选项 =》 设置 => 直接搜索editor.tabSize 设置为2 2、设置换行采用\n形式 用户首选项 =》 设置=> 直接搜索files:eol进行设置为\n。 如果文件已经是\r\n了，可以通过下图的方式进行转换
安装方法：点击vscode左侧扩展，搜索插件，点击安装 Path Intellisense 可以查找文件路径Auto Rename Tag 改变开始标签自动修改结尾标签Document This js 的注释模板( 按两次 Ctrl+Alt+D ，只在js文件中有效)beautify 格式化代码的工具（如果使用了ESLint ，格式话出来的可能不符合ESLint 规则，建议不安装）AutoFileName 文件路径自动补全插件eslint 添加对 eslint 的支持；stylelint 添加对stylelint的支持；配置保存时自动修复: vscode 配置保存时运行eslint、stlyelint并自动fix_supming1的专栏-CSDN博客vscode-stylelint 添加对stylelint支持Project Manager 项目管理器插件，可以在你的编辑器中快速切换项目按F1，输入pm会出来相关的命令 打开文件件，选择响应的save命令进行保存，后续才能打开 如果项目管理中用到git，可以安装git相关插件，这里有一篇文章介绍的比较详细：VSCode Git 相关的工具和插件 - 6小贱 - 博客园Settings Sync 设置同步插件( 方法参考：Visual Studio Code 设置同步到github的插件介绍及使用方法(Settings Sync)_廿四桥明月夜的博客-CSDN博客 )Align 使代码根据 =，: 等对齐（如果使用了ESLint ，格式话出来的可能不符合ESLint 规则，建议不安装）npm Intellisense 在 import 导入语句中自动完成npm 模块。npm IntellisenseMaterial Icon 文件夹图标插件, 用于比较显眼地区分各种文件、文件夹Vetur vue开发者才需安装，包含语法高亮、代码片段、Emmet、代码格式化、错误检测功能project-tree 自动生成项目目录文件结构 VScode自动生成项目目录文件结构 vue 3 推荐插件 Volar 参考 Volar - vue终极开发神器！ - 知乎 vscode 小程序开发环境参考： 开发微信小程序环境配置(vscode) - _fn - 博客园 vscode 开发小程序wxss和js可以采用stylelint和eslint进行格式校验和格式化，wxml没有看到整合相关lint的资料，不过找到了wxml-vscode 插件（注意作者已经不维护了,另外text组件没内容每次格式化都会多出一个换行）可以进行格式化 https://github.com/cnyballk/wxml-vscode 三、vs code 常用快捷 命令面板：F1（命令面板可以执行相应插件）重命名：F2跳转定义（切出新编辑器）： Ctrl + Alt + click跳转定义（切出新tab）：F12 或 Ctrl + 左键点击文件快速定位文件 ctrl + p分割编辑窗口 ctrl+ \快速调出终端 Ctrl+`ctrl + d 选择同样元素shift + tab 移动代码 四、Emmet输入 div 回车 输入 div#IDname 回车 输入ul>li*2 回车
更多阅读：前端开发必备！Emmet使用手册_Emmet, 会员专栏 教程_W3cplus 五、snippets 定义代码片段，便于快速复用依次点击：左下角设置图标=》用户代码片段=》在顶部弹出框中选择新建代码片段，起个名字保存后，生成的文件注释中有下面一段，把注释去掉，修改对应的内容即可，各项内容含义看下面注释。 "Print to console": { //是智能提示显示的 "scope": "javascript,typescript", "prefix": "log", //用户输入此处字符进行提示 "body": [//代码片段写在此处 "console.log('$1');", // $1代表光标位置 "$2" ], "description": "描述" } 这样定义后，下次输入log，就会显示提示，在提示中选择我们定义的那项，就会将代码片段插入，光标自定义到相应的$1处 |
【本文地址】
今日新闻 |
推荐新闻 |